<template>
  <div>
    <!-- -------------条件搜索区---------- -->
    <el-row :gutter="20">
      <el-col :span="3"><label class="el-form-item__label">区域搜索：</label></el-col>
      <el-col :span="7"><el-input v-model="input" class="input-inner" placeholder="请输入内容" />
      </el-col>
      <el-col :span="4"><el-button type="primary" icon="el-icon-search" class="but" @click="search"> 查询</el-button></el-col>
    </el-row>
    <div class="main">
      <!-- -------------新建区域---------- -->

      <el-row :gutter="20">
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-circle-plus-outline" class="btn2" @click="addStreet">新建</el-button>
        </el-col>
      </el-row>
      <!------ 新增界面弹窗 ------->
      <add-street ref="addstreet" :dialog-form-visible.sync="dialogVisible" @refresh-list="getList" />
      <!-- ------------------------ 表单展示区------------------------------ -->
      <el-table

        :data="tableData"
        border
        style="width: 100%"
        :show-header="true"
      >
        <el-table-column
          fixed
          type="index"
          label="序号"
        />
        <el-table-column
          prop="name"
          label="区域名称"
        />
        <el-table-column
          prop="nodeCount"
          label="点位数"
          width="80"
        />
        <el-table-column
          prop="remark"
          label="备注说明"
        />

        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="editRole(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="delstreet(scope.row)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
      <!------------- 分页组件 -------->
      <el-row :gutter="20">
        <el-col :span="20" class="eell">共{{ total }}记录，当前{{ newdata.pageIndex }}/{{ totalpage }}页</el-col>
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          layout="prev, next "
          :current-page.sync="newdata.pageIndex"
          :page-size="10"
          :total="total"
          @current-change="getList"
        />

      </el-row>
      <!-- 查看组件 -->
      <view-page :view-visible="viewVisible" :rows="rows" :streets="streets" />
    </div>
  </div>
</template>

<script>
import { getPointList, delStreet } from '@/api/area'
import addStreet from './addStreet.vue'
import viewPage from './viewPage.vue'
export default {
  components: {
    addStreet,
    viewPage
  },
  // 1页面布局基本完善
  // 1.1页面样式完善
  // 2获取数据渲染页面
  // 3分页组件
  // 3.1页面刷新
  // 4 新增组件
  // 5查看组件
  // 6 编辑组件
  data() {
    return {
      tableData: [],
      loding: false,
      newdata: {
        pageIndex: 1,
        pageSize: 10
      },
      input: '',
      total: 0,
      totalpage: 0,
      val: 1,
      dialogVisible: false,
      viewVisible: false,
      rows: {},
      streets: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleClick(row) {
      this.viewVisible = true
      console.log('id', row)
      this.rows = row
      this.streets = [{ name: row.name, nodeCount: row.nodeCount }]
    },
    async getList(val) {
      console.log(1)
      try {
        this.loding = true
        this.newdata.pageIndex = val
        const { data: { currentPageRecords, totalCount, totalPage }} = await getPointList(this.newdata)
        this.tableData = currentPageRecords // 数据列表
        this.total = parseInt(totalCount) // 总条
        this.totalpage = totalPage
      } catch (e) {
        throw new Error(e)
      } finally {
        this.loding = false
      }
    },
    addStreet() {
      this.dialogVisible = true
    },
    editRole(row) {
      this.$refs.addstreet.form = { ...row }
      console.log({ ...row })
      this.dialogVisible = true
    },
    delstreet(row) {
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delStreet(row.id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        console.log(this.total)
        this.$nextTick(this.getList(this.newdata.pageIndex--))
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    search() {
      console.log(1)
    }
  }
}
</script>

<style lang='scss' scoped>
.main{
  background-color: #fff;
  padding:1rem;
}
.el-form-item__label{
display: inline-block;
    text-align: right;
    vertical-align: middle;
   font-weight: normal;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .input-inner{
        -webkit-appearance: none;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: 14px;
    line-height: 40px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
  .but{
    background-color: #5f84ff;
  }
  .btn2{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border: none;
  }
.el-table__header{
.is-leaf{
 background-color: #f3f6fb;
}
}

  .eell{
   padding-top: .6rem;
   color:#ccc;
  }

</style>
